<template>
	<div class="detailInfoPage">
		<span>工作任务及细项信息</span>
		<div class="content-wrap">
			<div class="card-box d-flex flex-column m-t40" shadow="never">
				<div class="head-row d-flex j-sb">
					<div class="left-box d-flex a-center">
						<svg-icon
							icon-class="project-detail-icon-10"
							class="time-icon m-r20"
						/>
						<span
							>{{ filtersTime(taskInfo.planStartTime) }} 至
							{{ filtersTime(taskInfo.planEndTime) }}</span
						>
					</div>
					<div class="right-box">
						<el-button
							@click="appointedTaskUser"
							color="#d3af88"
							style="color: #ffffff"
							>指派任务责任人</el-button
						>
						<el-button color="#fc702b" style="color: #ffffff" @click="topath"
							>查看请示详情</el-button
						>
					</div>
				</div>
				<div class="head-row d-flex a-center m-t10">
					<span class="label m-r10">任务来源</span>
					<div class="value-box p-t10 p-b10 p-l10 p-r10 w90">
						<span>{{ taskInfo.taskSource || "暂无" }}</span>
					</div>
				</div>
				<div class="head-row d-flex a-center m-t10 j-sb">
					<div class="d-flex a-center">
						<span class="label m-r10">招标任务责任人</span>
						<div class="value-box p-t10 p-b10 p-l10 p-r10">
							<span>{{ taskInfo.responsibleUserName || "暂无" }}</span>
						</div>
					</div>
					<div class="d-flex a-center">
						<span class="label m-r10">预计完成时间</span>
						<div class="value-box p-t10 p-b10 p-l10 p-r10">
							<span>{{ filtersTime(taskInfo.planEndTime) }}</span>
						</div>
					</div>
					<div class="d-flex a-center">
						<span class="label m-r10">实际完成时间</span>
						<div class="value-box p-t10 p-b10 p-l10 p-r10">
							<span>{{
								filtersTime(taskInfo.realEndTime) || "0000-00-00"
							}}</span>
						</div>
					</div>
				</div>
				<div class="head-row d-flex a-center m-t10 j-sb">
					<span class="label m-r10">任务执行进度</span>
					<el-progress
						style="width: 85%"
						:stroke-width="10"
						:percentage="percentage"
						:color="customColor"
					/>
				</div>
				<div class="tip-box d-flex a-center j-center">
					<span>{{ taskInfo.taskName || "暂无" }}</span>
				</div>
				<el-divider />
				<div class="approval-process-wrap">
					<div class="paging-wrap d-flex j-end">
						<div class="paging-box d-flex a-center">
							<div
								class="paging-item d-flex a-center j-center"
								v-for="(item, index) in pagingList"
								:key="index"
								:style="{
									'--background-color':
										index === currentIndex ? '#807c99' : '#fff',
									'--color': index === currentIndex ? '#fff' : '#7D7D9A',
								}"
								@click="change(item, index)"
							>
								<span v-if="index === 0">当前</span>
								<span v-if="index !== 0">{{ index }}</span>
							</div>
						</div>
					</div>
					<div class="approval-process-content m-t20">
						<div
							class="approval-process-item d-flex flex-column m-b30"
							v-for="(item, index) in approvalList"
							:key="index"
						>
							<div class="approval-process-top d-flex a-center j-sb">
								<div
									class="approval-process-title px-10 py-10 d-flex a-center j-center"
								>
									{{ item.actionResult }}
									<!-- 流标 isTermination -->
								</div>
								<svg-icon
									icon-class="project-detail-icon-8"
									class="arrow-icon m-l10"
								/>
								<div
									v-if="index === 0"
									class="info-wrap py-10 d-flex a-center j-sb px-20"
								>
									<div>
										<span
											>实际完成时间:{{ filtersTime(item.serviceEndTime) }}</span
										>
									</div>
									<div></div>
									<div></div>
								</div>
								<div v-else class="info-wrap py-10 d-flex a-center j-sb px-20">
									<div v-if="item.isTermination == 1">
										<el-button
											size="small"
											@click="
												visible = true;
												terminateForm.disabled = true;
												terminateForm.terminate = item.terminationReason;
											"
											color="red"
											class="m-l5 terminateClass"
											>流标</el-button
										>
									</div>
									<div>
										<span
											>状态:{{
												["", "进行中", "已完成"][item.nodeStatus] || "未完成"
											}}</span
										>
									</div>
									<div>
										<span
											>实际完成时间:{{
												filtersTime(item.realEndTime) || "0000-00-00 00:00:00"
											}}</span
										>
									</div>
									<!-- <div>
                                <span>工期:{{item.duration || 0}}天</span>
                            </div> -->
								</div>
							</div>
							<div class="approval-process-bottom d-flex j-sb">
								<div class="arrow-box">
									<svg-icon
										v-if="index !== approvalList.length - 1"
										icon-class="project-detail-icon-8"
										class="bottom-icon m-l10"
									/>
								</div>
								<div class="info-wrap px-10 py-10">
									<div v-if="index === 0" class="status-box-1 d-flex flex-wrap">
										<span
											>项目类别：
											<b v-for="v in projectTaskList" :key="v.projectTypeId">
												<b v-if="item.projectTypeExplain == v.projectTypeId">{{
													v.typeName
												}}</b>
											</b>
										</span>

										<span
											>招标方式：
											<b
												v-for="v in competitiveBiddingStatusOptions"
												:key="v.value"
											>
												<b v-if="item.tenderTypeExplain == v.value">{{
													v.label
												}}</b>
											</b>
										</span>
										<span
											>招标项目预估价：{{ item.budgetControlAmount }}元</span
										>
										<span
											>服务期限（工期）：{{
												filtersTime(item.serviceStartTime)
											}}-{{ filtersTime(item.serviceEndTime) }}</span
										>
									</div>
									<div v-if="item.actionId == 3" class="status-box-2">
										<span @click="clickNotice(item)">查看通知书</span>
									</div>
									<div
										v-if="item.actionId == 5"
										@click="handleDown(item)"
										class="status-box-2"
									>
										<span @click="">下载合同</span>
									</div>
									<div
										v-if="
											item.actionId && item.actionId != 3 && item.actionId != 5
										"
										@click="toPath(item)"
										class="status-box-3"
									>
										<span>点击查看审批单</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 上传合同附件 -->
		<uploadcontractDialog
			ref="uploadRef"
			:type="noticeData.type"
		></uploadcontractDialog>

		<!-- 通知书弹出层 -->
		<EstablishmentDialog
			:noticeData="noticeData"
			ref="noticeDialogRef"
		></EstablishmentDialog>

		<!-- 终止流程 -->
		<public-dialog
			:title="'终止流程'"
			:width="'30%'"
			v-model:visible="visible"
			:footerButton="false"
		>
			<div class="public-dialog-content d-flex j-center a-center">
				<el-form
					:inline="true"
					ref="terminateFef"
					:model="terminateForm"
					class="demo-form-inline"
				>
					<el-form-item label="终止原因" prop="terminate">
						<el-input
							v-model="terminateForm.terminate"
							type="textarea"
							:disabled="terminateForm.disabled"
							:rows="3"
							placeholder="请输入终止原因"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
		</public-dialog>
	</div>
</template>

<script setup>
import { ElProgress, ElDivider } from "element-plus";
import { ref, reactive, onMounted, watch } from "vue";
import { projectInfoApi } from "@/api/biddingProject";
import PublicDialog from "@/components/PublicDialog.vue";
import uploadcontractDialog from "@/views/tenderProjectManage/taskManage/components/upload.vue";
import EstablishmentDialog from "@/views/tenderProjectManage/taskManage/components/EstablishmentDialog.vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { processApi } from "@/api/biddingProject";
import { competitiveBiddingStatusOptions } from "@/common/dict/dictCollect";
const percentage = ref(0);
const customColor = ref("#e6a23c");
const currentIndex = ref(0);
const pagingList = ref([]);

const props = defineProps({
	data: {
		type: Object,
	},
});

const filtersTime = (time) => {
	return time ? time.slice(0, 10) : "0000-00-00";
};

const approvalList = ref([]);

const getData = (param) => {
	let p1 = projectInfoApi.getTenderActionApplyFlow(param.projectTaskId);
	let p2 = projectInfoApi.getProjectInfoFlow(param);
	Promise.all([p1, p2]).then((res) => {
		if (res[0].code === "200" && res[1].code === "200") {
			percentage.value = 0;
			approvalList.value = [];
			pagingList.value = [];
			approvalList.value.push({
				actionResult: "招标项目请示信息审批",
				...res[0].data,
			});

			setTimeout(() => {
				if (taskInfo.value.reference) {
					approvalList.value.push({
						actionResult: "邀请服务单位信息审批",
						actionId: "-1",
						//  ...res[0].data
						...taskInfo.value.reference,
					});
				}
				if (res[1].data.taskFlowList) {
					approvalList.value.push(...res[1].data.taskFlowList);
					approvalList.value.map((v) => {
						if (v.nodeStatus == 2) {
							percentage.value = percentage.value + 20;
						}
						pagingList.value = res[1].data.workIdList;
					});
				}
			}, 200);
		}
	});
};

const taskInfo = ref({});
const getProjectTaskInfo = (projectTaskId) => {
	projectInfoApi.getProjectTaskInfo(projectTaskId).then((res) => {
		taskInfo.value = res.data;
	});
};

const topath = () => {
	window.open(taskInfo.value.taskSourceLink);
};
defineExpose({ getData, getProjectTaskInfo, taskInfo });

const change = (item, index) => {
	currentIndex.value = index;
	let params = {
		...props.data,
		workId: item,
	};
	getData(params);
};

const emits = defineEmits(["onAppointedTaskUser"]);
const appointedTaskUser = () => {
	emits("onAppointedTaskUser");
};

const toPath = (item) => {
	console.log(item.actionId);
	switch (item.actionId) {
		case "-1":
			router.push({
				path:
					"/tender/collaborativeApprovalManagement/tenderServiceUnitDetails/tenderTaskId=" +
					item.tenderTaskId,
			});
			break;
		case "1":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"view"}&businessId=${item.businessId}`,
			});
			break;
		case "2":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderRegisterDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"view"}&businessId=${item.businessId}`,
			});
			break;

		case "4":
			router.push({
				path: `/tender/collaborativeApprovalManagement/tenderContractDetails/tenderTaskId=${
					item.tenderTaskId
				}&pageType=${"view"}&businessId=${item.businessId}`,
			});
			break;

		default:
			break;
	}
};

/* 查看编辑通知书弹出 */
const noticeDialogRef = ref(null);
const uploadRef = ref(null);
const noticeData = reactive({
	title: "查看",
	type: "上传",
});

const clickNotice = (item) => {
	noticeDialogRef.value.getApplyWinNoticeInfo({
		tenderTaskId: item.tenderTaskId,
		businessId: item.businessId,
	});
	noticeDialogRef.value.open();
	noticeData.title = "查看";
};
// 下载合同扫描件
const handleDown = (item) => {
	uploadRef.value.getAnnex({
		tenderTaskId: item.tenderTaskId,
		businessId: item.businessId,
	});
	noticeData.type = "下载";
	uploadRef.value.open();
};

const projectTaskList = ref([]);

const getTypeList = () => {
	processApi.getTypeList().then((res) => {
		if (res.code == 200) {
			projectTaskList.value = res.data;
		}
	});
};

const visible = ref(false);
const terminateFef = ref(null);
const terminateForm = reactive({
	terminate: "",
	disabled: false,
});
watch(
	() => visible.value,
	() => {
		if (!visible.value) {
			terminateForm.terminate = "";
		}
	},
	{ immediate: true }
);
onMounted(() => {
	getTypeList();
});
</script>

<style lang="scss" scoped>
.detailInfoPage {
	width: 100% !important;

	.content-wrap {
		.card-box {
			width: 100%;
			position: relative;
			padding: 30px 20px 20px 20px;
			border: 1px solid #e3e7f1;
			border-radius: 10px;
			.head-row {
				.left-box {
					.time-icon {
						width: 27px;
						height: 27px;
					}
				}
				.label {
					font-size: 14px;

					font-weight: 600;
					color: #1a1a1a;
				}
				.value-box {
					background: #f7f7fa;
					border-radius: 4px;
				}
				.w90 {
					width: 90%;
				}
			}
			.tip-box {
				width: 266px;
				height: 43px;
				background: url("@/assets/iconImg/project-detail-icon-bg.png") no-repeat;
				background-size: 100% 100%;
				position: absolute;
				top: -20px;
				span {
					font-size: 14px;

					font-weight: 400;
					color: #1a1a1a;
				}
			}
			.approval-process-wrap {
				width: 100%;
				.paging-wrap {
					.paging-box {
						.paging-item {
							width: 36px;
							height: 22px;
							border: 1px solid #7d7d9a;
							cursor: pointer;
							background: var(--background-color);
							span {
								font-size: 12px;

								font-weight: 400;
								color: var(--color);
							}
						}
						.paging-item:first-child {
							border-radius: 8px 0px 0px 8px;
						}
						.paging-item:last-child {
							border-radius: 0px 8px 8px 0px;
						}
					}
				}
				.approval-process-content {
					width: 100%;
					.approval-process-item {
						width: 100%;
						.approval-process-top {
							width: 100%;
							.approval-process-title {
								background: #f7f7fa;
								border-radius: 6px;
								height: 30px;
								min-width: 160px;
								font-size: 14px;
							}
							.arrow-icon {
								width: 22px;
								height: 22px;
							}
							.info-wrap {
								width: 70%;
								height: 30px;
								background: #f7f7fa;
								border-radius: 6px;
								font-size: 14px;
							}
						}
						.approval-process-bottom {
							.arrow-box {
								position: relative;
							}
							.bottom-icon {
								width: 22px;
								height: 22px;
								transform: rotate(90deg);
								position: absolute;
								left: 64px;
								top: 25px;
							}
							.info-wrap {
								width: 70%;
								// border-radius: 6px;
								// border: 1px solid #E3E7F1;
								text-align: right;
								font-size: 14px;

								.status-box-1 {
									text-align: right;
									span {
										font-size: 12px;

										font-weight: 400;
										color: #1a1a1a;
										line-height: 23px;
										margin-right: 10px;
									}
								}

								.status-box-2 {
									span {
										display: inline-block;
										line-height: 26px;
										margin-right: 10px;
									}
									span:last-child {
										text-decoration: underline;
										font-size: 12px;

										font-weight: 400;
										color: #fc7018;
										cursor: pointer;
									}
								}

								.status-box-3 {
									width: 100%;
									span {
										display: inline-block;
										font-size: 12px;

										font-weight: 400;
										color: #fc7018;
										cursor: pointer;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.public-dialog-content {
	:deep(.el-form-item__content) {
		width: 300px;
	}
}

b {
	font-weight: 400;
}
</style>
